<template>
  <!-- 最大的盒子开始 -->
  <div class="searchHome">
    <div class="container">
      <!-- 顶部开始 -->
      <div class="searchtop">
        <router-link to="/home" class="back_a"
          ><i class="icon-back" style="font-size: 23px; line-height: 42px"></i
        ></router-link>
        <div class="searchbanner">
          <input type="text" v-model="textName" placeholder="大牌美妆满199减50" @keyup.enter="search" />
        </div>
        <router-link :to='"/searchList?name="+ this.textName'  class="searchword" style="font-size: 15px">搜索</router-link>
      </div>
      <!-- 顶部结束 -->
      <!-- 历史记录搜索 -->
      <div class="search-history" v-show="searchList.length > 0">
        <div class="history-bar">
            <div>最近搜索</div>
            <span @click="remove">清空</span>
        </div>
        <div class="history-list">
            <span v-for="(item,index) in searchList" :key="index" @click="searchItem(item)">{{item}}</span>
        </div>
      </div>
      <!-- 热门搜索开始时 -->
      <div class="hotsearch">
        <div class="hot_top">热门搜索</div>

        <!-- 热门搜索关键词开始 -->
        <div class="hotlist">
          <button class="listleft">露营出游 风衣低至95元</button>
          <button class="listright">限量爆款1折起</button>
        </div>
        <div class="hotlist">
          <button class="listleft">露营出游 风衣低至95元</button>
          <button class="listright">限量爆款1折起</button>
        </div>

        <div class="hotlist1">
          <button>耐克</button>
          <button>阿迪</button>
          <button>彪马</button>
          <button>李宁</button>
        </div>

        <div class="hotlist1">
          <button>耐克</button>
          <button>阿迪</button>
          <button>彪马</button>
          <button>李宁</button>
        </div>

        <div class="hotlist1">
          <button>耐克</button>
          <button>阿迪</button>
          <button>彪马</button>
          <button>李宁</button>
        </div>
        <div class="hotlist1">
          <button>耐克</button>
          <button>阿迪</button>
          <button>彪马</button>
          <button style="background-color: #fff0f7; color: #d73f83">
            李宁
          </button>
        </div>
        <!-- 热门搜索关键词结束 -->
      </div>
      <!-- 热门搜索结束 -->
    </div>
  </div>
  <!-- 最大的盒子结束 -->
</template>

<script>
export default {
  name: "searchView",
  data() {
    return {
        textName: "" , //搜索输入框
        searchList:[]  //存放历史搜索的值
    };

  },
  methods:{
    // 搜索
    search(){
        // 判断输入框的值是否相同  不相同的才会加入历史搜索
        var index = this.searchList.findIndex(item => item == this.textName);
        if(index == -1){
            this.searchList.push(this.textName);
            window.localStorage.setItem("history",JSON.stringify(this.searchList))
        }
        // this.searchList.push(this.textName);
        // window.localStorage.setItem("history",JSON.stringify(this.searchList));
        // this.$router.push("/searchList")
        // 带查询参数
        this.$router.push({"path":'searchList',query:{
                name:this.textName
        }})
    },
    // 点击历史搜索记录 直接跳转
    searchItem(item){
        this.$router.push({"path":'searchList',query:{
                name:item
        }})
    },
    // 清空历史记录
    remove(){
        window.localStorage.removeItem("history");
        this.searchList = [];
    }
  },
  created(){
    // 将localStorage里面的历史搜索记录取出来
    if(window.localStorage.getItem("history")){
        this.searchList = JSON.parse(window.localStorage.getItem("history"))
    }
  }
};
</script>

<style lang="scss" scoped>
.searchHome{
    .container .searchtop {
      display: flex;
      width: 100%;
      height: 43px;
      text-align: center;
      border-bottom: 1px solid #cccccc;
      box-sizing: border-box;
      line-height: 42px;
      padding-right: 6px;

      /* align-items: center; */
    }
    .searchtop .back_a {
      padding-left: 14px;
    }
    .searchtop .searchbanner {
      flex: 1;
      width: 285px;
      height: 42px;
      padding: 6px 0 6px;
      box-sizing: border-box;
    }
    .searchtop .searchbanner > input {
      outline: none;
      border: none;
      flex: 1;
      box-sizing: border-box;
      padding-left: 8px;
      display: block;
      /* width: 285px; */
      width: 100%;
      height: 30px;
      background-color: #f3f4f5;
      border-radius: 15px;
      overflow: hidden;
    }
    .searchtop .searchword {
      margin-left: 5px;
    }
    .search-history{
        width: 100%;
        padding: 15px 15px 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        .history-bar{
            width: 100%;
            display: flex;
            justify-content: space-between;
            div{
                color: #4c4c4c;
                font-size: 12px;
                line-height: 16px;
            }
            span{
                color: #737478;
                font-size: 13px;
                line-height: 16px;
            }
        }
        .history-list{
            padding: 0 0 19px;
            margin: 5px 0;
            display: flex;
            flex-wrap: wrap;
            span{
                width: 48px;
                height: 24px;
                border-radius: 8px;
                background-color: #f3f4f5;
                color: #363633;
                line-height: 24px;
                text-align: center;
                margin: 12px 8px 0 0;
            }
        }
    }


    .hotsearch {
      width: 100%;
      padding: 15px 15px 0;
      box-sizing: border-box;
      background-color: #fff;
    }
    .hotsearch .hot_top {
      font-size: 12px;
      color: #222;
    }
    .hotsearch .hotlist {
      display: flex;
      justify-content: flex-start;
    }
    .hotsearch .hotlist > button {
      margin: 12px 8px 0 0;
      background-color: #fff0f7;
      color: #d73f83;
      border: none;
      border-radius: 9.5px;
      font-size: 12px;
      padding: 6px 12px;
    }
    .hotsearch .hotlist1 {
      display: flex;
      justify-content: flex-start;
    }
    .hotsearch .hotlist1 > button {
      margin: 12px 8px 0 0;
      background-color: #f3f4f5;
      color: #222222;
      border: none;
      border-radius: 9.5px;
      font-size: 12px;
      padding: 6px 12px;
    }
    }
</style>
